<template>
	<div>
		<div class="cate-filter-wrap">
			<div class="cate-picker-title">一级分类</div>
			<div class="cate-picker-item-group">
				<span @click="change(0,1)" class="picker-item" :class="{selected: !idA}">不限</span>
				<span v-for="(item,index) of listA" @click="change(item.id,1)" :key="index" :class="{selected: idA == item.id}" class="picker-item">{{item.name}}</span>
			</div>
		</div>
		<div class="cate-filter-wrap" v-if="listB.length > 0">
			<div class="cate-picker-title">二级分类</div>
			<div class="cate-picker-item-group">
				<span @click="change(0,2)" class="picker-item" :class="{selected: !idB}">不限</span>
				<span v-for="(item,index) of listB" @click="change(item.id,2)" :key="index" :class="{selected: idB == item.id}" class="picker-item">{{item.name}}</span>
			</div>
		</div>
		<div class="cate-filter-wrap" v-if="listC.length > 0">
			<div class="cate-picker-title">三级分类</div>
			<div class="cate-picker-item-group">
				<span @click="change(0,3)" class="picker-item" :class="{selected: !idC}">不限</span>
				<span v-for="(item,index) of listC" @click="change(item.id,3)" :key="index" :class="{selected: idC == item.id}" class="picker-item">{{item.name}}</span>
			</div>
		</div>
	</div>
</template>

<script>
import Utils from 'hey-utils'
export default {
	props: {
		datas: Array,
		value: Number
	},
	data() {
		return {
			id: 0,
			idA: 0,
			idB: 0,
			idC: 0,
			listA: [],
			listB: [],
			listC: []
		}
	},
	watch:{
		id() {
			this.$emit('input',this.id)
		}
	},
	mounted() {
		this.listA = this.loadByFid(0)
	},
	methods: {
		loadById(id) {
			for(let n=0; n<this.datas.length ;n++){
				if(this.datas[n].id == id){
					return this.datas[n]
				} 
			}
		},
		loadByFid(fid) {
			let data = []
			for(let n=0; n<this.datas.length ;n++){
				if(this.datas[n].fid == fid){
					data.push(this.datas[n])
				} 
			}
			return data
		},
		change(id,lv) {
			if(id > 0){
				if(lv == 1){
					this.idA = id
					this.idB = 0
					this.idC = 0
					this.listB = this.loadByFid(id)
					this.listC = []
				}else if(lv == 2){
					this.idB = id
					this.idC = 0
					this.listC = this.loadByFid(id)
				}else if(lv == 3){
					this.idC = id
				}
				this.id = id
			}else{
				if(lv <= 3){
					this.idC = 0
					this.id = this.idB
				}
				if(lv <= 2){
					this.idB = 0
					this.listC = []
					this.id = this.idA
				}
				if(lv <= 1){
					this.idA = 0
					this.listB = []
					this.id = 0
				}
			}
		}
	}
}
</script>

<style lang='less'>
.cate-filter-wrap {
	display: flex;
	margin-bottom: 10px;
	.cate-picker-title {
		font-weight: bold;
		line-height: 32px;
		color: rgba(0, 0, 0, 0.65);
		width: 60px;
		margin-right: 15px;
		color: rgba(0,0,0,.85);
	}
	.cate-picker-item-group {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
	}
	.picker-item {
		cursor: pointer;
		margin: 2px;
		padding: 4px 8px;
		border-radius: 2px;
		transition: 0.2s;
		&:hover, &.selected {
			background: @primary-color;
			color: #FFF;
		}
	}
}
</style>